import React from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Button, Image} from '@tarojs/components';
import {AtModal, AtModalContent, AtBadge} from 'taro-ui';

import * as T from '../../types';
import actions from '../../actions/index';
import {store2Props} from '../../selectors';
import {
  OSS_PATH_PREFIX,
  OSS_BASE_PATH_PREFIX,
  GAME_RPICE_TYPE,
  CODE_SUCCESS,
  CODE_COIN_INSUFFICIENT,
} from '../../constant';

type IInfoProps = T.IProps & T.IInfoProps;

import './ExchangeModal.less';
import 'taro-ui/dist/style/components/modal.scss';
import 'taro-ui/dist/style/components/flex.scss';
import className from 'classnames';
// @ts-ignore

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
/**
 * 兑换模态框
 */
export default class ExchangeModal extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      OPERATES: [
        {
          label: '取消',
          func: 'handleCancel',
          className: 'leftBtn',
        },
        {
          label: '确认',
          func: 'handleConfirm',
          className: 'rightBtn',
        },
      ],
      atModal: {
        closeOnClickOverlay: false,
      },
    };
  }

  /**
   * 渲染
   * @returns
   */
  render() {
    const {
      visible,
      item,
      main: {
        response: {exchange},
      },
      navbarSettings,
    } = this.props;
    const {atModal, OPERATES} = this.state;

    console.log('exchangeModal render item', item);

    let operates = [OPERATES[0], OPERATES[1]];

    return (
      <AtModal
        isOpened={visible}
        className="exchangeModal"
        closeOnClickOverlay={atModal.closeOnClickOverlay}
        atModalStyle={{top: navbarSettings.navBarHeight}}
      >
        <AtModalContent>
          <View className="modalContent">
            <View className="exchangeModalContent">{this.renderExchangeMessage(item)}</View>
            <View className="modalFooter">
              {operates.map((i: any, index: number) => (
                <View key={'operate' + index} className={i.className}>
                  <Button onClick={() => this[i.func](i)} className={i.className + 'Button'}>
                    {i.label}
                  </Button>
                </View>
              ))}
            </View>
          </View>
        </AtModalContent>
      </AtModal>
    );
  }

  /**
   * 点击取消
   */
  handleCancel = () => {
    const {item} = this.props;
    this.props.onCancel(item);
  };

  /**
   * 点击确认
   */
  handleConfirm = () => {
    const {item} = this.props;

    this.props.onConfirm(item);
  };

  /**
   * 提示兑换
   */
  renderExchangeMessage(item = {}) {
    item = item || {};
    return <View className="extraModalMessageTitle">是否兑换{item.name}?</View>;
  }
}
